<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>好书推荐</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<style>
			*{
				padding: 0px;
				border: 0px;
				margin: 0px;
				font-family: "黑体";
			}
			#dv-serach{
				position: fixed;
				width: 100%;
				height: 50px;
				top: 10px;
				background-color: #fafafa;
			}
		</style>
	</head>
	<body style="background-color: white;">
		<div class="mui-content">
			<div id="dv-serach" style="">
				<input type="search" placeholder="Search" style="height: 40px; background-color: white; font-size: 17px;"/>
			</div>
			
			<div id="rfc-goodBooksLst" class="mui-scroll-wrapper" style="height: 92%; top: 70px;">
				<div class="mui-scroll">
					
					<!--<div style="display: flex; margin: 10px 5px 10px 4px;">
                    	<div style="margin: 2px 5px 2px 5px; float: left;">
                    		<img src="../../img/1-13092PQ63K52.jpg" height="80" width="80" />
                    	</div>
                    	<div style="float: right; margin: 2px 0px 2px 10px; width: 80%;">
                    		<div style="color: #303030; font-size: 16px; width: 100%;">孩子不吃饭就该打一顿</div>
                    		<div style="margin-top: 30px; color: #303030; font-size: 14px; width: 100%;">
                    			<span style="float: left;"><img src="../../img/jzkt/yanjing_03.png" width="16"/>&nbsp;100</span>
                    			<span style="float: right; margin-right: 20px;">评论量：100</span>
                    		</div>
                    	</div>
                 </div><hr style="width: 100%; background-color: #DCDCDC; height: 1px;" />
                 -->
                    
                    
					<div id="goodBooksLst">

					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/utils/http.utils.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script>
		var $wxfwid = localStorage.getItem("wxfwid");
		mui.init({
			pullRefresh: {
				container: "#rfc-goodBooksLst",
				up: {
					height: 20,
					auto: true,
					deceleration: 0.0006 ,
					contentrefresh : "加载中...",
					contentnomore:'没有更多数据了',
					callback: fun_loadUpGoodBooksLst
				}
			}
		});
		
		var currPage = 0;
		
		function fun_loadUpGoodBooksLst(){
			fun_loadGoodBooksData(9, currPage);
		}
		
		function fun_goodBooksTem($books, num) {
			var $goodBooksTem =
				  '<a href="artdetails.html?artid=' + $books.id + '"><div style="display: flex; margin: 10px 5px 10px 4px;">'
            +   	'<div style="margin: 2px 5px 2px 5px; float: left; width: 20%;">'
            +    		'<img src="' + $books.thumbnail + '" style="height:100px; width:80px;"/>'
            +    	'</div>'
            +    	'<div style="float: right; margin: 2px 0px 2px 10px; width: 80%;">'
            +    		'<div style="color: #303030; font-size: 16px; width: 100%;">' + $books.title + '</div>'
            +    		'<div style="display: block; margin-top: 60px; color: #303030; font-size: 14px; width: 100%;">'
            +    			'<span style="float: left;"><img src="../../img/jzkt/yanjing_03.png" width="16"/>&nbsp;'+ $books.readCount +'</span>'
            +   			'<span style="float: right; margin-right: 20px;"><img src="../../img/comm.png" width="16" height="14"/>&nbsp;'+ $books.commentInfo.commentNum +'</span>'
            +    		'</div>'
            +    	'</div>'
            +    '</div></a><hr style="width: 100%; background-color: #DCDCDC; height: 1px;" />';
			return $goodBooksTem;
		}

		function fun_loadGoodBooksData($psize, $pcurr) {
			
			mui.ajax({
				url : $request_url.getGoodBooksLst,
				type : "get",
				headers: {
					"Authorization": $headers_authorization
				},
				dataType : "json",
				data : {
					typeCode : "HSSC",
					orgId : $wxfwid,
					recommend : "",
					rows : $psize,
					page : $pcurr
				}, 
				success : function(dat){
					if(dat.code == 0){
						var $result = dat.result;
						if($result != null && $result != ""){ 
							currPage ++;
							mui("#rfc-goodBooksLst").pullRefresh().endPullupToRefresh(false);
							var $resDoc = document.getElementById("goodBooksLst");
							var $outerCycleNum = Math.ceil($result.length / 3);
							var $count = 0;
							//外循环体
							for(var i = 0; i < $outerCycleNum; i ++){
								var $outerDiv = document.createElement("div")
								$outerDiv.setAttribute('style', 'margin-top: 10px; display: flex; text-align: center;');
								//内层循环
								for(var j = 0; j < 3; j++){
									$count ++;
									if($result[$count - 1] != null && $result[$count - 1] != ""){
										var $insideDiv = document.createElement("span");
										$insideDiv.setAttribute("style", "display: block; width: 33%;");
										$insideDiv.innerHTML = bookslstTem($result[$count - 1], $count);
										$outerDiv.appendChild($insideDiv);
									}
								}
								$resDoc.appendChild($outerDiv);
								var $hrDiv = document.createElement("div");
								$hrDiv.innerHTML = '<hr style="width: 100%; height: 1px; background-color: #F1F1F1; margin-top: 10px;" />';
								$resDoc.appendChild($hrDiv);
							}
						} else {
							mui("#rfc-goodBooksLst").pullRefresh().endPullupToRefresh(true);
						}
					} else {
						mui.toast(dat.message);
						return;
					}
				}, error : function(err){
					mui.toast("服务繁忙...");
					return;
				}
			});
			
			
			/*mui.ajax({
				url: $request_url.getGoodBooksLst,
				type: "get",
				headers: {
					"Authorization": $headers_authorization
				},
				data: {
					orgId: $wxfwid,
					typeCode: "HSSC",
					rows: $psize,
					page: $pcurr
				},
				dataType: "json",
				success: function(dat) {
					if(dat.code == 0) {
						var $GoodBooksDoc = document.getElementById("ul-goodBooksLst");
						var $goodBooksLst = dat.result
						if($goodBooksLst != null && $goodBooksLst.length > 0){
							mui("#rfc-goodBooksLst").pullRefresh().endPullupToRefresh(false); // 加载数据最没有更多内容
							for(var i = 0; i < $goodBooksLst.length; i++) {
								var $gBooksLi = document.createElement('div');
								$gBooksLi.innerHTML = fun_goodBooksTem($goodBooksLst[i], i);
								$GoodBooksDoc.appendChild($gBooksLi);
							}
							currPage ++;
						} else {
							mui("#rfc-goodBooksLst").pullRefresh().endPullupToRefresh(true); // 加载数据最没有更多内容
						}
						
					}
				},
				error: function(err) {

				}
			});*/
		}
		
		function bookslstTem($info, $num){
			var $img = "../../img/livehall/shu2_05.png";
			return '<img src="'+ $info.thumbnail +'" style="width: 100px; height: 130px;" data="'+ $info.id +'" />';
		}
		
		mui("#goodBooksLst").on("tap", "img", function(){
			var $booksId = this.getAttribute("data");
			mui.openWindow({
				url : "artdetails.html?artid=" + $booksId
			});
		});
		
		/*mui('#rfc-goodBooksLst').on("tap", "a", function(){
			mui.openWindow({
				url : this.href
			});
		});*/
	</script>
</html>
